<template>
  <el-dialog :title="title" v-model="dialogVisible" width="600px">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleFormRef"
      label-width="120px"
    >
      <!-- <el-form-item
        label="用户名"
        prop="userName"
      >
        <el-input v-model="ruleForm.userName" />
      </el-form-item>
      <el-form-item
        label="密码"
        prop="password"
      >
        <el-input v-model="ruleForm.password" />
      </el-form-item>
      <el-form-item
        label="真实姓名"
        prop="realName"
      >
        <el-input v-model="ruleForm.realName" />
      </el-form-item>
      <el-form-item
        label="手机号码"
        prop="cellphone"
      >
        <el-input v-model="ruleForm.cellphone" />
      </el-form-item>
      <el-form-item
        label="电子邮箱"
        prop="email"
      >
        <el-input v-model="ruleForm.email" />
      </el-form-item>
      <el-form-item
        label="职位"
        prop="post"
      >
        <el-input v-model="ruleForm.post" />
      </el-form-item>
      <el-form-item
        label="排序"
        prop="orderNum"
      >
        <el-input v-model.number="ruleForm.orderNum" />
      </el-form-item>
      <el-form-item
        label="用户类型"
        prop="email"
      >
        <el-select
          v-model="ruleForm.userClassify"
          placeholder="请选择"
        >
          <el-option
            label="普通用户"
            :value="0"
          />
          <el-option
            label="市政府领导"
            :value="1"
          />
          <el-option
            label="市府办领导"
            :value="2"
          />
        </el-select>
      </el-form-item> -->
      <el-form-item label="设置密码" prop="password">
        <el-input
          type="password"
          v-model.number="ruleForm.password"
          style="max-width: 200px"
        />
        <p class="tip">tip：  请输入大于6位的数字与字母（至少一位大写字母）、特殊字符组成的密码</p>
      </el-form-item>
      <el-form-item label="组织关系" prop="orgRoles">
        <org-role-select v-model:orgroles="ruleForm.orgRoles" />
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submit"> 确 定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { ref, defineComponent, watch, computed } from "vue";
import { createUser, editUser, getUserInfo } from "@/api/system";
import useEditDialog from "@/hooks/useEditDialog";
import OrgRoleSelect from "./OrgRoleSelect.vue";
import { validPhone, validPassword } from "@/utils/validate";
import { ElMessage } from "element-plus";
export default defineComponent({
  name: "EditDialog",
  emits: ["update-list"],
  components: {
    OrgRoleSelect,
  },
  setup(props, { emit }) {
    const DEFAULT_FORM = {
      avatar: "",
      realName: "", // 真实姓名
      cellphone: "", // 手机号码
      email: "", // email
      orderNum: "", // 排序
      post: "", // 职位
      orgRoles: [], // 组织列表
      userName: "", // 用户名
      password: "", // 密码
    };

    const checkCellphone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      }
      if (!validPhone(value)) {
        return callback(new Error("请填写正确的手机号码"));
      } else {
        return callback();
      }
    };
    const checkPass = (rule, value, callback) => {
      if (value === "") {
        return callback();
      }
      if (!validPassword(value)) {
        return callback(new Error("请输入正确的"));
      } else {
        return callback();
      }
    };

    const rules = computed(() => {
      const baseRules = {
        // 表单校验规则
        orgRoles: [
          { required: true, message: "请选择所属组织", trigger: "blur" },
        ],
        password: [
          {
            validator: checkPass,
            trigger: "blur",
          },
        ],
      };

      return baseRules;
    });

    const {
      dialogVisible,
      title,
      ruleForm,
      ruleFormRef,
      open,
      close,
      isEditDialog,
    } = useEditDialog({
      createApi: createUser,
      editApi: editUser,
      defaultForm: DEFAULT_FORM,
      emit,
    });

    const getDetail = async () => {
      const res = await getUserInfo(ruleForm.value.id);
      ruleForm.value = {
        ...res.data,
        orgRoles: res.data.orgRoleList,
      };
      ruleFormRef.value.clearValidate();
    };
    const editFn = async (orgRoles) => {
      const res = await editUser(ruleForm.value.id, { orgRoles: orgRoles, password:ruleForm.value.password });
      ElMessage.success("修改成功");
      if (res.status === 200 || res.status === 201) {
        emit("update-list");
        close();
      }
    };
    const submit = async () => {
      ruleFormRef.value.validate((valid) => {
        if (valid) {
          const orgRoles = [];
          ruleForm.value.orgRoles.map((item) => {
            orgRoles.push({
              orgId: item.orgId,
              roleId: item.roleId,
            });
          });
          editFn(orgRoles);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    };
    watch(dialogVisible, () => {
      if (dialogVisible.value) {
        if (isEditDialog.value) {
          getDetail();
        } else {
          // ruleForm.value.menus = null
        }
      }
    });

    return {
      isEditDialog,
      ruleFormRef,
      ruleForm,
      rules,
      dialogVisible,
      title,
      open,
      close,
      submit,
    };
  },
});
</script>
<style scoped>
.tip {
  font-size: 12px;
  margin-top: 5px;
  color: rgb(245, 108, 108);
}
</style>